<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link class="include" type="text/css" rel="stylesheet" href="/bigjo/css/jquery.jqplot.css">
<script type="text/javascript" src="/bigjo/js/jquery.js"></script>
<script type="text/javascript" src="/bigjo/js/jquery.jqplot.js"></script>
<script type="text/javascript" src="/bigjo/js/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="/bigjo/js/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="/bigjo/js/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="/bigjo/js/jqplot.pointLabels.js"></script>
<title>Insert title here</title>
</head>

<script type="text/javascript">
	$(document).ready(function(){
		var ten_singer = new Array();
		var ten_count = new Array();
		for(var i = 0 ; i <10; i++){
			ten_singer[i] = $("#fiftiessinger"+i).attr("fifties_singer");
			ten_count[i] = $("#fiftiessinger"+i).attr("fifties_count");
			if(ten_singer[i] == "" && ten_count[i] == null){
				if(ten_singer[i] == null &&  ten_count[i] == ""){
					break;
				}
			}
		}
		plot2 = $.jqplot('chart1', [ten_count], {
			animate: !$.jqplot.use_excanvas,
			seriesDefaults : {
				renderer : $.jqplot.BarRenderer,
				pointLabels : {show : true}
			},
			axes : {
				xaxis : {
					renderer : $.jqplot.CategoryAxisRenderer,
					ticks : ten_singer,
					tickOptions:{
						angle:30,
						formatString:'%b'
					},
				},
				yaxis : {
					min:0,
					max:500,
					tickOptions:{formatString: "%d"}
				}			
			},
			highlighter: { show: false }
		}); 
	})
</script>
<body>
	<div id="chart1" class="chart1"></div>
	<%int i = 0 ; %>
	<c:forEach var="fifties" items="${fiftiessinger}">
		<input type="hidden" id="fiftiessinger<%=i%>"
			fifties_count="${fifties.singeralbean.sgl_count}"
			fifties_singer="${fifties.singerbean.s_singer}">
		<input type="hidden" value="<%=i++%>">
	</c:forEach>
</body>
</html>